Skip to main content

Vite Vanilla Project Structure

Introduction to Vite​

Vite is a next-generation, fast, and efficient build tool that aims to improve the development experience for frontend developers. It's designed to be lightning-fast and provide modern web development features such as hot module replacement (HMR), optimized builds, and support for a variety of frontend frameworks and tools.

The primary feature of Vite is its ability to serve and build applications in a super-fast manner by utilizing modern JavaScript APIs. Unlike older build tools like Webpack, Vite leverages the native browser support for ES Modules during development, offering significant performance improvements.

In this guide, we will explore the structure of a Vite project, focusing on a "vanilla" setup, which does not use any frameworks like React, Vue, or Svelte. This is helpful for projects that do not require complex frameworks but instead use plain JavaScript, HTML, and CSS.

Vite Vanilla Project Overview​

The typical Vite vanilla project structure is simple and lightweight. It's optimized for small to medium-sized projects and can be easily extended. The project structure is divided into several key parts:

1. Root Directory​

The root directory of a Vite project typically contains the following files and folders:

  • index.html: The entry HTML file where the application is loaded. This file usually includes the script tag that connects to the JavaScript code.
  • package.json: This file manages the project's dependencies, scripts, and configuration. It also includes metadata like the project name, version, and author.
  • vite.config.js (or vite.config.ts): The configuration file for Vite. It contains the setup and configuration options for Vite, including build options, plugins, and customizations.
  • node_modules/: This directory contains all the project's npm dependencies.
  • dist/: This is where Vite generates the production build, containing minified files, optimized assets, and bundled JavaScript.

The structure will look something like this:

my-vite-project/
├── index.html
├── package.json
├── vite.config.js
├── node_modules/
├── dist/
└── src/
    ├── main.js
    └── style.css

Key Components of Vite Vanilla Project Structure​

2. index.html​

The index.html file is where the application's HTML structure begins. Vite uses this as the entry point for your project, and it includes the root div and references the main JavaScript file for the project.

A basic index.html might look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite Vanilla Project</title>
  <link rel="stylesheet" href="/src/style.css" />
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Key features:

  • ES Module script tag: Vite uses the type="module" attribute in the <script> tag to load the JavaScript file. This allows Vite to perform its fast module-based development workflow.
  • Link to CSS: The CSS file is linked directly, and any styles you create are scoped to this page.
  • id="app": This is the container where your JavaScript app will be rendered.

3. package.json​

The package.json file is at the heart of your project. It includes metadata about the project as well as all the dependencies and development dependencies needed for the application. When you create a Vite project, package.json will automatically be created.

Here’s a typical package.json for a Vite vanilla setup:

{
  "name": "vite-vanilla-project",
  "version": "1.0.0",
  "description": "A basic Vite project with vanilla JS",
  "main": "index.html",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {},
  "devDependencies": {
    "vite": "^4.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

Key elements:

  • scripts: These define the commands that you can run through npm. The most common ones are:
    • dev: Starts the development server (vite command).
    • build: Builds the project for production (vite build command).
    • preview: Serves the built project for preview (vite preview command).
  • dependencies: This section includes libraries or frameworks your project depends on, such as react, vue, or axios.
  • devDependencies: These are the development tools your project needs to function, including Vite itself.

4. vite.config.js (or vite.config.ts)​

The vite.config.js file allows you to customize the build process. You can configure many aspects of Vite, such as which plugins to use, how the build should be optimized, and what paths should be used.

Here’s an example of a basic vite.config.js for a vanilla project:

import { defineConfig } from 'vite';

export default defineConfig({
  root: './',  // The root directory of the project
  build: {
    outDir: 'dist',  // Output directory for production build
    sourcemap: true,  // Enable sourcemaps for debugging
  },
  server: {
    port: 3000,  // Development server port
  },
});

5. src/ Directory​

The src/ directory is where the core application files reside. This directory typically includes:

  • main.js: The main entry JavaScript file where the application is initialized.
  • style.css: The stylesheet for the application.

Here’s an example of what the files inside src/ might look like:

main.js​

document.getElementById('app').innerHTML = '<h1>Hello, Vite!</h1>';

This file contains the JavaScript code that manipulates the DOM and powers the application.

style.css​

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #42b983;
}

This is a basic CSS file that adds some simple styling to your project.

6. dist/ Directory​

Once you run the vite build command, Vite will generate a production-optimized build inside the dist/ directory. This directory includes:

  • Minified JavaScript files.
  • Optimized images and other assets.
  • A production-ready index.html file.
  • The entire bundled application ready for deployment.

The contents of dist/ might look like this:

dist/
├── assets/
│   └── logo.123abc.png
├── index.html
├── assets.234abc.js
└── main.567def.js

Benefits of Vite's Project Structure​

Speed and Efficiency​

Vite's hot module replacement (HMR) and on-demand file serving make the development experience incredibly fast. The project structure is optimized to support this speed by serving files directly from memory during development.

Simplicity and Flexibility​

Vite’s vanilla project setup keeps things simple. You can easily extend the structure and add tools or features as your project grows. Whether you're adding TypeScript, integrating external libraries, or transitioning to a framework, Vite allows you to customize your project structure with minimal effort.

Enhanced Development Experience​

With Vite, you get:

  • Fast startup times.
  • Instant updates on code changes.
  • A production-ready build process.
  • ES Modules support in the browser during development.

Conclusion​

The Vite Vanilla project structure is designed to be simple yet powerful, providing a streamlined development experience for projects that don’t require complex frameworks. With a clean, organized structure that focuses on speed, flexibility, and modern JavaScript features, Vite is an excellent choice for both small projects and larger applications.

By understanding the layout of a typical Vite project, you can efficiently develop, build, and deploy modern web applications with ease. Whether you're starting a new project or converting an existing one, Vite's project structure offers the tools and flexibility you need to succeed.